<script setup lang="ts">
import ItemWrap from "@/components/item-wrap";
import LeftTop from "./left-top.vue";
import LeftBottom from "./left-bottom.vue";
import RightTop from "./right-top.vue";
import RightBottom from "./right-bottom.vue";
import CenterTable from "./center-table.vue";
import CenterMap from "./centerMap.vue";
import NavIndex from "./navIndex.vue";
import CenterNavTop from "./center-nav-top.vue";
import RegionSwitchButtons from "./region-switch-buttons.vue";

import NavPage from "@/components/navPage/index.vue";

const handleNavChange = (index: number, item: any) => {
  console.log(index, item);
}
</script>

<template>
    <div class="green-power-box">
        <!-- 左侧区域 -->
        <div class="content_left">
            <ItemWrap class="content_lr-item" title="瞬时功率曲线" style="height: 300px;">
                <LeftTop />
            </ItemWrap>
            <ItemWrap class="content_lr-item" title="发电柱图" style="flex: 1;">
                <LeftBottom />
            </ItemWrap>
        </div>

        <!-- 中间区域 -->
        <div class="content_center">
            <CenterNavTop/>
            <div class="center-content-wrapper">
                <div class="map-section">
                    <!-- <ItemWrap class="content_lr-item" title="分布图">
                        <CenterMap />
                    </ItemWrap> -->
                    <CenterMap class="contetn_center_top" title="分布图" />
                </div>
                <div class="region-switch-section">
                    <RegionSwitchButtons />
                </div>
            </div>
            <NavPage @nav-change="handleNavChange" :nav-index="0" />
            <!-- <ItemWrap class="content_center-table" title="绿电供应详细数据">
                <CenterTable />
            </ItemWrap> -->
            <!-- <ItemWrap class="content_lr-item" title="区域发电对比">
                <NavIndex />
            </ItemWrap> -->
        </div>

        <!-- 右侧区域 -->
        <div class="content_right">
            <ItemWrap class="content_lr-item" title="弃电利用量" style="flex: 1;">
                <RightTop />
            </ItemWrap>
            <ItemWrap class="content_lr-item" title="弃电接收量" style="height: auto;">
                <RightBottom />
            </ItemWrap>
        </div>
    </div>
</template>

<style scoped lang="less">
.green-power-box {
    width: 100%;
    display: flex;
    min-height: calc(100% - 64px);
    justify-content: space-between;
    gap: 20px;
}

// 左边 右边 结构一样
.content_left,
.content_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    width: 540px;
    box-sizing: border-box;
    // flex-shrink: 0;
}

.content_center {
    // flex: 1;
    width: calc(100% - 40px - 540px - 540px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .content_center-table {
        height: 300px;
        margin-top: auto;
    }
    
    .center-content-wrapper {
        flex: 1;
        display: flex;
        gap: 20px;
        
        .map-section {
            flex: 2;
            display: flex;
            flex-direction: column;
        }
        
        .region-switch-section {
            flex: 1;
            min-width: 280px;
            max-width: 320px;
        }
    }
}

.content_lr-item {
    height: 50%;
    // height: 310px;
    // flex: 1;
}
.contetn_center_top{
    flex: 1;
}
</style>